<html>
  <head>
    <style>
      table     { width: 400px; height: 25px; font-size: 10px; }
      td.blue   { background: lightblue;  color: rgba(0,0,0,0) }
      td.green  { background: lightgreen; color: rgba(0,0,0,0) }
      col.a     { width: 25%;   }
      col.c     { width: 25%;   }
    </style>
  </head>
  <body>
    With colspan:
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue"></td>
        <td class="green" colspan="2"></td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue">xxx</td>
        <td class="green" colspan="2"></td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue"></td>
        <td class="green" colspan="2">xxx</td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue">xxx</td>
        <td class="green" colspan="2">xxx</td>
      </tr></tbody>
    </table>

    Without colspan:
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue"></td>
        <td class="green"></td>
        <td class="green"></td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue">xxx</td>
        <td class="green"></td>
        <td class="green"></td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue"></td>
        <td class="green">xxx</td>
        <td class="green"></td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue"></td>
        <td class="green"></td>
        <td class="green">xxx</td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue">xxx</td>
        <td class="green">xxx</td>
        <td class="green"></td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue">xxx</td>
        <td class="green"></td>
        <td class="green">xxx</td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue"></td>
        <td class="green">xxx</td>
        <td class="green">xxx</td>
      </tr></tbody>
    </table>
    <table cellspacing=0 cellpadding=0>
      <colgroup><col class="a"/><col/><col class="c"/></colgroup>
      <tbody><tr>
        <td class="blue">xxx</td>
        <td class="green">xxx</td>
        <td class="green">xxx</td>
      </tr></tbody>
    </table>
  </body>
</html>
